<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">用户管理</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="usernameId" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="usernameId">
                </div>
            </div>
            <div class="form-group pwdDiv">
                <label for="passwordId" class="col-sm-2 control-label">密码</label>

                <div class="col-sm-10">
                    <input type="password" class="form-control" id="passwordId">
                </div>
            </div>
            <div class="form-group">
                <label for="parentId" class="col-sm-2 control-label">所属部门</label>

                <div class="col-sm-10">
                    <input type="text" readonly="readonly" class="form-control load-sys-dept" id="parentId" placeholder="上级部门">
                </div>
            </div>
            <div class="form-group">
                <label for="emailId" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="emailId">
                </div>
            </div>
            <div class="form-group">
                <label for="phoneId" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="phoneId">
                </div>
            </div>
            <div class="form-group">
                <label for="rolesId" class="col-sm-2 control-label">角色</label>
                <div class="col-sm-10" id="rolesId">
                </div>
            </div>



        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
            <button type="button" class="btn btn-info pull-right btn-add">Save</button>
        </div>
        <!-- /.box-footer -->

        <!-- zTree 对应的div -->
        <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="treeLayer" type="page" times="2" showtime="0" contype="object"
             style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
            <div class="layui-layer-title" style="cursor: move;">选择部门</div>
            <div class="layui-layer-content" style="height: 358px;">
                <div style="padding: 10px;" class="layui-layer-wrap">
                    <ul id="deptTree" class="ztree"></ul>    <!-- 动态加载树 -->
                </div>
            </div>
            <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
            <div class="layui-layer-btn layui-layer-btn-">
                <a class="layui-layer-btn0 btn-confirm">确定</a>
                <a class="layui-layer-btn1 btn-cancel">取消</a>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="/bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="/bower_components/layer/layer.js"></script>
<script type="text/javascript">
    var zTree;
    var setting={
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: null
            }
        }
    }
    $(function () {
        $("#mainID").on("click",".load-sys-dept",doLoadZtreeMenuNodes);
        $("#treeLayer").on("click",".btn-confirm",doSetSelectNode)
            .on("click",".btn-cancel",doHideTree);
        doLoadSysRoles();
        $(".box-footer").on("click",".btn-add",doSaveOrUpdate)
            .on("click",".btn-cancel",doCancel);
    })
    function doSaveOrUpdate() {
        //获取表单的数据
        var rowData=$("#mainID").data("rowData");
        var params=doGetEditFormData();
        if (rowData){
            params.id=rowData.user.id;
            $("#mainID").removeData("rowData");
        }
        //console.log(params);
        //发送请求
        var insertUrl="/user/doSaveObject";
        var updateUrl="/user/doUpdateObject";
        var url=rowData?updateUrl:insertUrl;
        $.post(url,params,function (result) {
            if(result.state==1){
                alert("操作成功");
                doCancel();
            }else {
                alert(result.message);
            }
        })
    }
    function doCancel() {
        $("#mainID").load("user/user_list");
    }
    function doGetEditFormData() {
        var params={
            username: $("#usernameId").val(),
            password: $("#passwordId").val(),
            email: $("#emailId").val(),
            mobile: $("#phoneId").val(),
            deptId: $("#parentId").data("parentId"),
        };
        var roleIds=new Array();
        $("#rolesId input[type='checkbox']").each(function () {
            if($(this).prop("checked")){
                roleIds.push($(this).val())
            }
        })
        params.roleIds=roleIds.toString();
        console.log(params);
        return params;
    }
    function doLoadZtreeMenuNodes() {
        var url="/dept/doFindZtreeDeptNodes";
        $.getJSON(url,function (result) {
            if (result.state==1){
                //使用init方法进行初始化
                zTree=$.fn.zTree.init(
                    $("#deptTree"),
                    setting,
                    result.data
                );
                //显示出来
                $("#treeLayer").css("display","block");
            }else{
                alert(result.message);
            }
        })
    }
    //隐藏树
    function doHideTree() {
        $("#treeLayer").css("display","none");
    }
    //将选中的节点 设置到input标签中 显示出来
    function doSetSelectNode() {
        //获取选中的对象
        var nodes=zTree.getSelectedNodes();
        if(nodes.length==1){
            var node=nodes[0];
            console.log(node);
            //将内容填充到input标签中
            $("#parentId").data("parentId",node.id);
            $("#parentId").val(node.name);
        }
        doHideTree();
    }
    function doLoadSysRoles() {
        var url="/role/doFindRoles";
        $.getJSON(url,function (result) {
            if(result.state==1){
                doInitDivSysRoles(result.data);
                doInitFormData();//修改时 初始化页面
            }else {
                alert(result.message);
            }
        })
    }
    function doInitFormData() {
        var data=$("#mainID").data("rowData");
        if (!data)return;//判断是添加还是修改？ 如果是添加就跳出
        //如果修改，把密码div移除
        $(".pwdDiv").remove();
        //写入值
        $("#usernameId").val(data.user.username);
        $("#parentId").val(data.user.sysDept.name);
        $("#parentId").data("parentId",data.user.sysDept.id);
        $("#emailId").val(data.user.email);
        $("#phoneId").val(data.user.mobile);
        var ids=data.roleIds;
        for (var i in ids){
            $("#rolesId input[value='"+ids[i]+"']").prop("checked",true);
        }
    }
    function doInitDivSysRoles(data) {
        var div=$("#rolesId");
        var checkBox="<input type='checkbox' name='roleItem' value='[id]'>[name]";
        for (var i in data){
            div.append(
                checkBox.replace("[id]",data[i].id)
                .replace("[name]",data[i].name)
            );
        }
    }
</script>